<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>

    #a{
        margin: 0 auto;
        width: 960px;
        height:50px;
      
        position: relative;  
    }  
    #a #log{
        position: absolute;
        
    }
    #a #count{
        position: absolute;
        top: 13px;
        right:250px;
        z-index: 1;
    }
    #a #nav{
        position: absolute;
        top: 10px;
        right: 0px;
        z-index: 0;
    }
    #a #nav ul li{
        list-style-type: none;
        background:#ACD6FF;
        float: left;
        width: 80px;
        color: black;
        text-align: center;
        font-size: 0.9em;
    }
    #a #nav ul li:hover{
        font-weight: bold;
        background: white;
    }

    #b{
        margin: 0 auto;
        width: 960px;
        height:38px ;  
        background-image: url(img/menuBg.jpg); 
    }  
    #b ul{
        width: 960px;
        list-style-type: none;
    }
    #b ul li{
        /* background:orange; */
        width: 53px;
        float: left;
        line-height: 50px;
        text-align: left;
        color: white;
    }
    #b  ul li:hover{
        font-weight: bold;
    }
    
    #c{
        background:white;
        margin: 0 auto;
        width: 960px;
        height:120px;
        margin-top: 10px;
    }  
    #d{
        margin: 0 auto;
        width: 960px;
        height:370px;
        margin-top: 20px;
        border: 2px solid greenyellow;
        position: relative;
    }
    #d #img{
        margin-top: 15px;
        margin-left: -12px;
    }
    #d #book1{
        position: absolute;
        width: 550px;
        top: 80px;
    }
    #d #no1{
        position: absolute;
        top: -3px;
        left: 20px;
    }
    #d #show1{
        width: 280px;
        height: 200px;
        position: absolute;
        top: 10px;
        right: 20px;
    }
    #d #show1 p{
        font-size: 0.4em;
    }
    #d #book2{
        position: absolute;
        width: 400px;
        top: 80px;
        left: 550px;
    }
    #d #no2{
        position: absolute;
        top: -15px;
        left: 0 px;
    }
    #d #show2{
        width: 350px;
        height: 200px;
        position: absolute;
        top: 0px;
        right: -55px;
    }
    #d #show2 p{
        font-size: 0.4em;
    }

    #d #book3{
        position: absolute;
        width: 400px;
        top: 220px;
        left: 550px;
    }
    #d #no3{
        position: absolute;
        top: -15px;
        left: 0 px;
    }
    #d #show3{
        width: 350px;
        height: 200px;
        position: absolute;
        top: 0px;
        right: -55px;
    }
    #d #show3 p{
        font-size: 0.4em;
    }
    #e{
        width: 960px;
        height: 50px;
        /* border: 2px solid red; */
        margin: 0 auto;
        position: relative;
    }
    #e #img{
        position: absolute;
        float: left;
        top: 0px;
        right: 480px;
    }
    #e #left{
        position: absolute;
        top: 15px;
        left: 156px;
        font-size: 0.6em;
    }
    #e #right{
        position: absolute;
        top: 15px;
        right: 148px;
        font-size: 0.6em;
    }

</style>
<body>
    <div id="a">
        <div id="log">
            <a href="dangdang.html"><img src="img/logo.jpg" ></a>
        </div>
        <div id="count"><img src="img/icon_count.png"></div>
        <div id="nav">
                <ul>
                    <li><a href="#" style="text-decoration:none;">尾品汇</a></li>
                    <li><a href="#" style="text-decoration:none;">当当优品</a></li>
                    <li><a href="#" style="text-decoration:none;">数字馆</a></li>
                    <li><a href="#" style="text-decoration:none;">都看阅读</a></li>
                </ul>
            </div>
    </div>
    <div id="b">
        <ul>
            <li><a href="#" style= "text-decoration:none;">首页</a></li>
            <li><a href="#" style= "text-decoration:none;">图书</a></li>
            <li><a href="#" style= "text-decoration:none;">音像</a></li>
            <li><a href="#" style= "text-decoration:none;">童装</a></li>
            <li><a href="#" style= "text-decoration:none;">服装</a></li>
            <li><a href="#" style= "text-decoration:none;">鞋靴</a></li>
            <li><a href="#" style= "text-decoration:none;">运动</a></li>
            <li><a href="#" style= "text-decoration:none;">箱包</a></li>
            <li><a href="#" style= "text-decoration:none;">美妆</a></li>
            <li><a href="#" style= "text-decoration:none;">珠宝</a></li>
            <li><a href="#" style= "text-decoration:none;">家居</a></li>
            <li><a href="#" style= "text-decoration:none;">食品</a></li>
            <li><a href="#" style= "text-decoration:none;">酒</a></li>
            <li><a href="#" style= "text-decoration:none;">手机</a></li>
            <li><a href="#" style= "text-decoration:none;">数码</a></li>
            <li><a href="#" style= "text-decoration:none;">电脑</a></li>
            <li><a href="#" style= "text-decoration:none;">家电</a></li>
        </ul>             
    </div>
    <div id="c"><a href="#"><img src="img/banner.png"></a></div>
    <div id="d">
        <div id="img"><img src="img/bg_bang.gif" alt=""></div>
        <div id="book1">
            <div id="book"><img src="img/book-01.jpg"></div>
            <div id="no1"><img src="img/bookNo1.gif" alt=""></div>
            <div id="show1">
                <a href="#" id="bookname" style="color:skyblue;  size: 0.5em; text-decoration:none;">偷影子的人</a>
                <p>作者：[法]马克·李维（Marc levy）著</p>
                <p>出版社：湖南文艺出版社</p>
                <p>当当价：<a style="color: chocolate; display:inline; ">￥17.90</a></p>
                <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，</p>
                <p>我童年时的小女孩，今日蜕变成了女人，一段青梅竹</p>
                <p>马的回忆，一个时间之神没有应允的愿望。一个老</p>
                <p>是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊</p>
                <p>能力而强大：他能“偷别人的影子”</p>
            </div>
        </div>
        <div id="book2">
                <div id="book"><img src="img/book-02.jpg"></div>
                <div id="no2"><img src="img/bookNo2.gif" alt=""></div>
                <div id="show2">
                    <a href="#" style="color:skyblue; size: 1.2em; text-decoration:none;">看见（央视知名记者、主持人柴静：十年</a>
                    <p></p>
                    <a href="#" style="color:skyblue; size: 1.2em; text-decoration:none;">人生成长的告白，中国社会变迁的备忘</a>
                    <p style="size: 0.4em;"> 作者：柴静 著</p>
                    <p >出版社：广西师范大学出版社</p>
                    <p style=" color: chocolate;" >￥29.40 <a style="color:#93FF93;">7.4折</a></p>    
                </div>
        </div>
        <div id="book3">
        <div id="book"><img src="img/book-03.jpg"></div>
        <div id="no3"><img src="img/bookNo3.gif" alt=""></div>
        <div id="show3">
            <a href="#" style="color:skyblue; size: 1.2em; text-decoration:none;">改变孩子先改变自己</a>
            <p>作者：贾容韬 贾毅 著</p>
            <p >出版社：作家出版社</p>
            <p style=" color: chocolate;" >￥22.20 <a style="color:#93FF93;">7.4折</a></p>    
        </div>
        </div>
       
    </div>
    <div id="e">
        <div id="left">Copyright(C)2004-2017 当当网,All Rights Reserved</div>
        <div id="img" /*style="text-align:center"*/><img src="img/validate.gif"></div>
        <div id="right">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
    </div>
    
</body>
</html> 